<script setup lang="ts">
import Section from '@/components/Section/index.vue'
import { defineProps, ref } from 'vue'
let props = defineProps({
  arr: Array
})
const loading = ref(true)
let count = 0
const load = () => {
  count++
  if (count == props.arr.length) {
    loading.value = false
  }
}
</script>

<template>
  <Section icon-name="furniture" zh="实景案例" en="EXAMPLE" />

  <u-skeleton
    :rows="3"
    :loading="loading"
    :title="false"
    :animate="true"
    :rowsHeight="['300', '300', '300']"
    :rowsWidth="['200%', '200%', '200%']"
  >
    <view class="g" :key="item" v-for="item in props.arr">
      <up-image
        mode="widthFix"
        width="100%"
        height="100%"
        class="i"
        :src="item"
        radius="15rpx"
        :showMenuByLongpress="false"
        @load="load"
      ></up-image>
    </view>
  </u-skeleton>
</template>

<style scoped lang="scss">
.g {
  padding-bottom: 20rpx;
  width: 100%;
}
.i {
  width: 100%;
}
</style>
